<template>
	<view class="p-bot110" >
		<status-bar :title="title" ></status-bar>
		
		<swiper :indicator-dots="pageData.merMemo.length > 1" :autoplay="true" :interval="3000" :duration="1000" 
		        :indicator-active-color="color" class="swiper" v-if="pageData">
			<swiper-item v-for="(item,index) in pageData.merMemo" :key="index">
				<image :src="$imgUrls(item)" mode="aspectFill" class="wh"></image>
			</swiper-item>

		</swiper>

		<view class="rows contBox">
			<view class="content">
				<view class="rows">
					<view class="clasine m-right10">{{pageData.bussName}}</view>
					<text class="color_33 size28 bold">{{pageData.name}}</text>
				</view>
				<view class="color_99 h6 m-top20">{{pageData.description2}}</view>
				<view class="row j-sb a-center ">
					<view class="d-flex a-center" @click.stop="$openLocation(pageData)">
						<image :src="$staticImg('pot.png')" class="posImg"></image>
						<text class="color_33 h6 m-left10">{{pageData.distance}}</text>
					</view>
					<view class="d-flex a-center">
						<image :src="$staticImg('call.png')" class="ioneins" @click.stop="tel(pageData.phone)"></image>
						<image :src="$staticImg('pos1.png')" class="ioneins" @click.stop="$openLocation(pageData)"></image>
					</view>
				</view>
			</view>
		</view>
		
		
		
		<view class="rows padding30">
			<u-parse :content="pageData.description" :domain="imgUrl"></u-parse>
		</view>
		
		
		<view class="footer">
			<view class="bit flexac concat" @click="toUrl(`/pages/concat/concat?shop_id=${pageData.shop_id}`)">联系客服</view>
			<view class="bit flexac paly" @click="toUrl(`/pages/playCode/playCode?id=${pageData.shop_id}`)">消费/支付</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				title: '详情',
				shop_id:'',
				pageData:'',
			}
		},
		onLoad(opt) {
			if(opt.shop_id) this.shop_id = opt.shop_id;
			this.storesIndex();
		},
		methods: {
storesIndex() {
				this.$http.post({
					url: '/singleSaleApi/storesIndex',
					data: {
						shop_id: this.shop_id
					}
				}).then(res => {
					if (res.code != 100) return this.$Toast(res.msg);
					const result = res.data;
					this.pageData = result;
					this.title = result.name;
				})
			},
		},
		computed:{
			...mapState(['color']),
		}
	}
</script>

<style lang="scss" scoped>
	$pageBg:#f3f2f6;
	.swiper {
		width: 100%;
		height: 333rpx;
	}

	.contBox {
		background-color: $pageBg;
		padding-bottom: 20rpx;
	}

	.content {
		width: 100%;
		background-color: #fff;
		padding: 30rpx;
	}
	.clasine{
		display:inline-block;
		padding:2rpx 10rpx;
		color:#fff;
		font-size:20rpx;
		border-radius: 10rpx;
		background-color: #0ECD8B;
	}
	.posImg{
		width:20rpx;
		height: 20rpx;
	}
	.ioneins{
		width:38rpx;
		height: 38rpx;
		padding:20rpx;
	}
	.footer{
		width:100%;
		height: 100rpx;
		background-color: #fff;
		padding:0 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		position: fixed;
		bottom: 0;
		left:0;
		z-index:100;
	}
	.bit{
		width: 300rpx;
		height: 76rpx;
		border-radius: 38rpx;
		color:#fff;
		font-size:26rpx;
		font-weight: bold;
	}
	.concat{
		background-color: #0ECD8B;
	}
	.paly{
		background: linear-gradient(90deg, #67A4FF 0%, #287AF5 100%);
	}
</style>